<template>
	<view>
		<view class="content">
			<image v-for="(item,index) in url" :key="index" :src="imgUrl(item)" mode="widthFix"></image>
		</view>
		<view class="form-list">
			<u-form :model="form" ref="uForm" :label-style="labelStyle" label-width="180">
				<u-form-item label="联系人姓名" prop="name">
					<u-input v-model="form.name" placeholder="请输入"/>
				</u-form-item>
				<u-form-item label="联系人电话" prop="phone">
					<u-input v-model="form.phone" placeholder="请输入"/>
				</u-form-item>
				<u-form-item label="微信/QQ" prop="wxqq">
					<u-input v-model="form.wxqq" placeholder="请输入"/>
				</u-form-item>
			</u-form>
			<view class="tips u-flex">
				<image src="@/static/icon/tips.png"></image>
				<text>提示：如有不方便电话沟通的可以微信或QQ联系</text>
			</view>
			<u-button shape="circle" type="primary" @click="submit">提交</u-button>
		</view>
		
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				type:'',
				name:'',
				url:'',
				labelStyle:{color:'#111',fontWeight:'bold',fontSize:'30rpx'},
				form:{
					name:'',
					phone:'',
					wxqq:''
				}
			}
		},
		methods: {
			submit(){
				this.$u.post('/api/mapping/apply',{
					mapping_classify_id:this.type,
					mapping_type_id:this.id,
					name:this.form.name,
					phone:this.form.phone,
					wxqq:this.form.wxqq
				}).then(res=>{
					uni.redirectTo({
						url:'/pages/more/result'
					})
				})
			}
		},
		onReady() {
			this.$app.setTitle(this.name)
		},
		onLoad({id,type,name,url}) {
			this.id = id
			this.type = type
			this.name = name
			this.url = url ? url.split(',') : []
		}
	}
</script>

<style lang="scss">
	.content{padding: 40rpx;
		image{display: block;width: 100%;}
	}
	
	.form-list{
		padding: 0 42rpx 30rpx;
		/deep/.u-form-item.u-border-bottom{border-bottom: 1rpx solid #ddd;padding: 18rpx 0!important;
			&::after{display: none;}
		}
		.tips{
			padding: 10rpx 0 80rpx;
			image{width: 24rpx;height: 24rpx;display: block;padding-right: 15rpx;}
			text{font-size: 24rpx;color: #666;}
		}
	}
</style>
